<template>
 <div style="width: calc(100% + 24px);transition: all .3s cubic-bezier(0.23, 1, 0.320, 1);animation-name: customAnimation;"
  :style="{
    opacity:data.numberPerRow==0?0:1,
    scale:data.numberPerRow==0?'1.01':'1'
  }"
 >
    <div v-for="item in data.display[data.currentDisplay]" style="border-radius: 5px;display: inline-block;margin-bottom: 24px;"
      :style="{
        width:'calc(100% / ' + data.numberPerRow.toString() + ')'
      }"
    >
        <div class="item" style="width: calc(100% - 24px);"
            :style="{
                height:data.itemHeight,
                backgroundColor:appData.theme.background
            }"
        >
          <div style="position: absolute;width: calc(100% - 32px);word-break: break-all;overflow: hidden;max-height: 180px;">
            <p style="font-size: 18px;font-weight: bold;">{{ item.title }}</p>
          </div>
          <p style="position: absolute;left: 16px;bottom: 12px;">{{ item.date }}</p>
          <div @click="openLink(baseURL + item.url)" class="item-wrapper" style="width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(128,128,128,0.1);z-index: 200;"></div>
        </div>
    </div>
 </div>
</template>

<script>

export default{
  data(){
    return{
      data:{
        itemHeight:'240px',
        numberPerRow:0,
        display:{
          col5:[],
          col4:[],
          col3:[],
          col1:[],
          black:[]
        },
        currentDisplay:'black'
      }
    }
  },
  mounted(){
    setInterval(() => {
      if(this.appData.pageSize.width>=1850){
        this.data.numberPerRow = 5
        this.data.currentDisplay = 'col5'
      }else if(this.appData.pageSize.width>=975){
        this.data.numberPerRow = 4
        this.data.currentDisplay = 'col4'
      }else if(this.appData.pageSize.width>=660){
        this.data.numberPerRow = 3
        this.data.currentDisplay = 'col3'
      }else{
        this.data.numberPerRow = 1
        this.data.currentDisplay = 'col1'
      }
    }, 10);
    for(let i=0;i<this.items.length;i++){
      if(i<30){
        this.data.display.col5.push(JSON.parse(JSON.stringify(this.items[i])))
      }
      if(i<28){
        this.data.display.col4.push(JSON.parse(JSON.stringify(this.items[i])))
      }
      if(i<27){
        this.data.display.col3.push(JSON.parse(JSON.stringify(this.items[i])))
      }
      if(i<20){
        this.data.display.col1.push(JSON.parse(JSON.stringify(this.items[i])))
      }
    }
  },
  methods:{
    openLink(url){
      window.open(url,'_blank')
    }
  },
  props:{
    appData:undefined,
    items:undefined,
    baseURL:undefined
  },
}
</script>

<style scoped>

.item:hover .item-wrapper{
  opacity: 1;
}

.item-wrapper{
  opacity: 0;
  display: inline-block;
}

.item{
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  padding: 12px 16px;
  cursor: pointer;
  position: relative;
  color: var(--color-neutral-10);
  border: 1px solid var(--color-neutral-3);
  background-color: var(--color-neutral-1);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.item:hover{
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background-color: var(--color-neutral-2);
}

</style>